<template>
  <div class="resource-properties">
    <div class="properties-header">
      <h4>属性配置</h4>
      <a-button type="primary" size="small" @click="handleEdit">
        <IconifyIcon icon="mdi:pencil" />
        编辑属性
      </a-button>
    </div>

    <div class="properties-content">
      <a-collapse v-model:activeKey="activeKeys">
        <a-collapse-panel key="basic" header="基础属性">
          <a-descriptions :column="2" bordered size="small">
            <a-descriptions-item label="容量">
              {{ resource?.properties?.capacity || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="单位">
              {{ resource?.properties?.unit || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="规格">
              {{ resource?.properties?.specification || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="版本">
              {{ resource?.properties?.version || '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>

        <a-collapse-panel key="advanced" header="高级属性">
          <pre class="json-display">{{ formatJson(resource?.properties) }}</pre>
        </a-collapse-panel>

        <a-collapse-panel key="constraints" header="约束条件">
          <pre class="json-display">{{
            formatJson(resource?.constraints)
          }}</pre>
        </a-collapse-panel>

        <a-collapse-panel key="metadata" header="元数据">
          <pre class="json-display">{{ formatJson(resource?.metadata) }}</pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import type { ResourceItem } from '#/api/resource-center';

interface Props {
  resource: ResourceItem | null;
}

const props = defineProps<Props>();

const activeKeys = ref(['basic']);

const formatJson = (obj: any) => {
  if (!obj) return '暂无数据';
  try {
    return JSON.stringify(obj, null, 2);
  } catch (error) {
    return String(obj);
  }
};

const handleEdit = () => {
  // 处理编辑属性
  console.log('编辑属性', props.resource);
};
</script>

<style lang="less" scoped>
.resource-properties {
  .properties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .properties-content {
    .json-display {
      background: #f5f5f5;
      padding: 12px;
      border-radius: 4px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-all;
      max-height: 300px;
      overflow-y: auto;
    }
  }
}
</style>
